let preview = document.querySelector('.preview_img')
let mask = document.querySelector('.mask')
let big = document.querySelector('.big')
preview.addEventListener('mouseover', function () {
    mask.style.display = "block"
    big.style.display = "block"
})
preview.addEventListener('mouseout', function () {
    mask.style.display = "none"
    big.style.display = "none"
})
preview.addEventListener('mousemove', function (e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    var maskX = x - mask.offsetWidth / 2;
    var maskY = y - mask.offsetHeight / 2;
    var maskMax = preview.offsetWidth - mask.offsetWidth;
    if (maskX <= 0) {
        maskX = 0;
    } else if (maskX >= maskMax) {
        maskX = maskMax;
    }
    if (maskY <= 0) {
        maskY = 0;
    } else if (maskY >= maskMax) {
        maskY = maskMax;
    }
    mask.style.left = maskX + 'px';
    mask.style.top = maskY + 'px';
    var bigIMg = document.querySelector('.bigImg');
    var bigMax = bigIMg.offsetWidth - big.offsetWidth;
    var bigX = maskX * bigMax / maskMax;
    var bigY = maskY * bigMax / maskMax;
    bigIMg.style.left = -bigX + 'px';
    bigIMg.style.top = -bigY + 'px';
})
